<template>
  <div class="app-container">

    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon">
            <div class="total-title">今日订单总数</div>
            <div class="total-value">{{totalOrdersToday}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon">
            <div class="total-title">今日销售总额</div>
            <div class="total-value">￥{{totalSalesToday}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon">
            <div class="total-title">昨日销售总额</div>
            <div class="total-value">￥{{totalSalesYesterday}}</div>
          </div>
        </el-col>
        <!--<el-col :span="6">-->
        <!--<div class="total-frame">-->
        <!--<svg-icon icon-class="total-week" class="total-icon">-->
        <!--</svg-icon>-->
        <!--<div class="total-title">近7天销售总额</div>-->
        <!--<div class="total-value">￥50000.00</div>-->
        <!--</div>-->
        <!--</el-col>-->
      </el-row>
    </div>

    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger">({{orderToBePaid}})</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已完成订单</span>
              <span style="float: right" class="color-danger">({{orderCompleted}})</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已取消订单</span>
              <span style="float: right" class="color-danger">({{orderCancelled}})</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">商品系列总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{offShelf}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{alreayShelves}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{allProducts}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">全部商品</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{newlyAddedByToday}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{newlyAddedByYesterday}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{newThisMonth}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{memberTotalNumber}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">订单统计</div>
      <el-row>
        <el-col :span="4">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399;font-size: 14px">本月订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{ordersOfThisMonth}}</div>
              <div>
                <span :class="percentage[Number(0<yearOnYearLastMonthByOrderCount)]"
                  style="font-size: 14px">{{ordersOfLastMonth}}({{yearOnYearLastMonthByOrderCount}}% )</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{numberOfOrdersThisWeek}}</div>
              <div>
                <span :class="percentage[Number(0<yearOnYearLastMonthByWeekCount)]"
                  style="font-size: 14px">{{numberOfOrdersLastWeek}}({{yearOnYearLastMonthByWeekCount}}%)</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本月销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{salesThisMonth}}</div>
              <div>
                <span :class="percentage[Number(0<yearOnYearLastMonthByMonthSales)]"
                  style="font-size: 14px">{{salesLasMonth}}({{yearOnYearLastMonthByMonthSales}}%)</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{salesThisWeek}}</div>
              <div>
                <span :class="percentage[Number(0<yearOnYearLastMonthByMonthSales)]"
                  style="font-size: 14px">{{salesLasWeek}}({{yearOnYearLastMonthByMonthSales}}%)</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="padding: 10px;border-left:1px solid #DCDFE6">
            <el-date-picker style="float: right;z-index: 1" size="s米糕" v-model="orderCountDate" type="daterange"
              align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              @change="handleDateChange"
              :picker-options="pickerOptions">
            </el-date-picker>
            <div>
              <ve-line :data="chartData" :legend-visible="false" :loading="loading" :data-empty="dataEmpty"
                :settings="chartSettings"></ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import img_home_order from '@/assets/images/home_order.png';
import { FetchStatisticsOrder, FetchStatisticsMarket, FetchStatisticsOrderBetween, FetchStatisticsUser } from "../../api/index"
import img_home_today_amount from '@/assets/images/home_today_amount.png';
import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
import { PERCENTAGE } from "../../contanst/data"
import {getThisWeekTime, getDaysByThisMonth, getStartTimeByThisMonth} from "../../utils/DateComputer"

let startTimeBythisWeek = getThisWeekTime();
export default {
  name: 'home',
  data() {
    return {
      startTimeBythisWeek: startTimeBythisWeek,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            let start = startTimeBythisWeek;
            // console.log("start", start);

            picker.$emit('pick', [start, start + 3600 * 1000 * 24 * 7]);
          }
        }, {
          text: '最近一月',
          onClick(picker) {
            let start = getStartTimeByThisMonth();
            console.log("start + 3600 * 1000 * 24 * getDaysByThisMonth(new Date())",
             getDaysByThisMonth(new Date()))
            picker.$emit('pick', [start, start + 3600 * 1000 * 24 * getDaysByThisMonth(new Date())]);
          }
        }]
      },

      percentage: PERCENTAGE,
      totalOrdersToday: 0,
      totalSalesToday: 0,
      totalSalesYesterday: 0,
      orderToBePaid: 0,
      orderCompleted: 0,
      orderCancelled: 0,
      offShelf: 0,
      allProducts: 0,
      alreayShelves: 0,

      /**
       * 上月订单总数
       */
      ordersOfLastMonth: 0,

      ordersOfThisMonth: 0,
      numberOfOrdersThisWeek: 0,
      /**
       * 上周订单总数
       */
      numberOfOrdersLastWeek: 0,

      // 上周销售额
      salesLasWeek: 0,
      // 上月销售额
      salesLasMonth: 0,

      newlyAddedByToday: 0,
      newlyAddedByYesterday: 0,

      // 订单数量同比上月
      yearOnYearLastMonthByOrderCount: 0,

      // 订单数量同比上周
      yearOnYearLastMonthByWeekCount: 0,

      // 订单销售额同比上周
      yearOnYearLastMonthByWeekSales: 0,

      // 订单销售额同比上月
      yearOnYearLastMonthByMonthSales: 0,
      /**
       * 本月新增
       */
      newThisMonth: 0,
      /**
       * 会员总数
       */
      memberTotalNumber: 0,
      salesThisWeek: 0,
      salesThisMonth: 0,
      orderCountDate: [],
      chartSettings: {
        xAxisType: 'time',
        area: true,
        axisSite: { right: ['count'] },
        labelMap: { 'count': '订单数量', 'price': '订单金额' }
      },
      chartData: {
        columns: [],
        rows: []
      },
      loading: false,
      dataEmpty: false,
      img_home_order,
      img_home_today_amount,
      img_home_yesterday_amount
    }
  },
  watch: {

  },
  created() {
    this.initOrderCountDate();
    this.getData();


  },

  mounted() {
    FetchStatisticsOrder(this);

    FetchStatisticsMarket(this);

    FetchStatisticsUser(this);

    this.handleDateChange();
  },


  methods: {
    handleDateChange() {
      let today = getThisWeekTime();
      
      
      console.log("today", today, "todayEnd");
      let todayEnd = this.orderCountDate[1];

      console.log();

      FetchStatisticsOrderBetween({
        startTime: parseInt(today / 1000),
        endTime: parseInt(todayEnd / 1000),
      }, this);

    },
    initOrderCountDate() {
      let start = this.startTimeBythisWeek;

      const end = new Date();
      end.setTime(start + 1000 * 60 * 60 * 24 * 7);
      this.orderCountDate = [start, end];
    },
    getData() {
      // setTimeout(() => {

      //   console.log(123456);
      //   for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
      //     let item=DATA_FROM_BACKEND.rows[i];
      //     let currDate=str2Date(item.date);
      //     let start=this.orderCountDate[0];
      //     let end=this.orderCountDate[1];
      //     // if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
      //       this.chartData.rows.push(item);
      //     // }
      //   }

      // }, 1000)
    }
  }
}
</script>

<style scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}

.address-layout {}

.total-layout {
  margin-top: 20px;
}

.total-frame {
  border: 1px solid #DCDFE6;
  padding: 20px;
  height: 100px;
}

.total-icon {
  color: #409EFF;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}

.un-handle-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #F2F6FC;
  font-weight: bold;
}

.un-handle-content {
  padding: 20px 40px;
}

.un-handle-item {
  border-bottom: 1px solid #EBEEF5;
  padding: 10px;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #DCDFE6;
}

.statistics-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}

.mine-layout {
  position: absolute;
  right: 140px;
  top: 107px;
  width: 250px;
  height: 235px;
}

.address-content {
  padding: 20px;
  font-size: 18px
}
</style>
